<template>
  <div class="login-content"
       :style="{backgroundImage: 'url(' + require('@/assets/image/login-bg.png') + ')' }">

    <div class="login-title">
      <h1 class="title">请登录</h1>
      <div class="title-desc">欢迎来到方寸云播</div>
    </div>

    <van-form class="login-form"
              @submit="onSubmit">
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-1.png')" />
        <van-field v-model="username"
                   name="username"
                   placeholder="请输入手机号"
                   :rules="phoneRules"
                   clearable />
      </div>
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-2.png')" />
        <van-field v-model="password"
                   name="password"
                   type="password"
                   placeholder="请输入密码"
                   :rules="[{ required: true, message: '请输入密码' }]"
                   clearable>
        </van-field>
      </div>

      <div @click="$router.replace({name:'Registered'})"
           class="switch-login">还没帐号?立即注册 ></div>

      <van-button type="default"
                  class="login-btn"
                  native-type="submit"
                  round
                  block
                  :disabled="!(this.username && this.password)">登录</van-button>
    </van-form>

  </div>
</template>

<script>
import { phoneRules } from '@/utils/formRules'
import { callAppFunction } from '@/utils/utils'
import { login } from '@/api/login'
import { mapMutations } from 'vuex'
var hasHistory = false // 记录是否有上一页
export default {
  name: 'Login',
  data() {
    return {
      phoneRules: Object.freeze(phoneRules),
      username: '',
      password: '',
      showErrorMsg: false,
      waitTime: 60
    }
  },
  /**
   * 路由守卫
   */
  beforeRouteEnter(to, form, next) {
    next()
    if (form.name) {
      hasHistory = true
    }
  },
  created() {
    callAppFunction('appLogin')
  },
  methods: {
    ...mapMutations({
      memberLogin: 'memberLogin'
    }),

    /**
     * 验证登陆
     */
    onSubmit(values) {
      login(values)
        .then(res => {
          // 用户登陆信息
          this.memberLogin({ token: res.result.token, info: res.result.info })
          if (hasHistory) {
            this.$router.go(-1)
          } else {
            this.$router.replace({ name: 'MemberIndex' })
          }
        })
        .catch(res => {
          this.$toast({
            message: res.message,
            type: 'loading'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.login-content,
.registered-content {
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: left;

  .login-title {
    padding: 55px 28px;
    color: #333333;

    .title {
      font-weight: bold;
      font-size: 37px;
      margin-bottom: 10px;
    }
    .title-desc {
      font-size: 17px;
    }
  }

  .login-form {
    font-size: 18px;
    padding: 0 48px;
    .form-icon {
      padding-top: 0.4rem;
    }
    /deep/ .van-cell {
      background-color: transparent;
      padding-left: 0.4rem;
      padding-right: 0rem;
    }
    .send-sms {
      border-color: transparent transparent transparent #e5e5e5;
      color: #999999;
      font-size: 16px;
      height: 100%;
    }
    .confirm {
      margin-top: 18px;
      font-size: 14px;
      /deep/ .van-icon {
        transform: scale(0.9);
      }
    }

    .login-btn {
      width: 100%;
      height: 44px;
      margin-top: 50px;
      background-color: #000000;
      color: #fbc491;
      font-size: 16px;
      &.van-button--disabled {
        opacity: 1;
        background-color: #f4f4f4;
        color: #666666;
      }
    }

    .switch-login {
      text-align: right;
      font-size: 12px;
      color: #666666;
      margin-top: 20px;
      padding: 10px;
    }
  }
}
</style>
